 import {
  TaobaoCircleOutlined, UploadOutlined,
} from '@ant-design/icons';
import { Button, ColorPicker, Form, Input, message, Select, Space, Tabs, Upload} from 'antd';
import { createStyles } from 'antd-style';
import React, { useState} from 'react';
 import {genChartByAiUsingPost, listChartByPageUsingPost} from "@/services/linbi/chartController";
 import TextArea from 'antd/es/input/TextArea';
import ReactEcharts from 'echarts-for-react';

const useStyles = createStyles(({ token }) => {
  return {
    action: {
      marginLeft: '8px',
      color: 'rgba(0, 0, 0, 0.2)',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
    lang: {
      width: 42,
      height: 42,
      lineHeight: '42px',
      position: 'fixed',
      right: 16,
      borderRadius: token.borderRadius,
      ':hover': {
        backgroundColor: token.colorBgTextHover,
      },
    },
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
    },
  };
});

 /**
  * 添加图表页面
  */
const AddChart: React.FC = () => {

  const [chart,setChart]=useState<API.BiResponse>();
  const [option,setOption]=useState<any>();
  const[submitting,setSubmitting]=useState<boolean>(false);

/**
 * 提交
 * @param values
 * */
  const onFinish =async (values: any) => {
   //避免重复提交
    if(submitting){
      return;
    }
     setSubmitting(true);

    // TODO: 对接后端，上传数据
    const params={
      ...values,
      file:undefined
    }
    try{
      const res=await genChartByAiUsingPost(params,{},values.file.file.originalFileObj)
      if(!res?.data){
        message.error('分析失败');
      }else{
        message.success('生成成功');
         const chartOption=JSON.parse(res.data.genChart ?? '');
         if(!chartOption){
           message.error('图表代码解析错误');
         }
         else {
           setChart(res.data);
           setOption(chartOption);
         }

      }
    }
    catch (e:any){
      message.error('分析失败'+e.message);
    }
    setSubmitting(false);
  };

  return (
    <div className="add-chart">
      <Form
        name="addChart"
        onFinish={onFinish}
        initialValues={{}}
      >

        <Form.Item name="goal" label="分析目标" rules={[{required: true, message: '请输入分析目标'}]}>
          <TextArea placeholder="请输入分析需求，比如：分析网站用户的活跃度情况"/>
        </Form.Item>

        <Form.Item name="name" label="图标名称">
          <Input placeholder="请输入要生成的图标名称"/>
        </Form.Item>

        <Form.Item name="chartType"
                   label="图表类型"
          //      rules={[{ required: true, message: 'Please select your chartType!' }]}
        >
          <Select options={[
            {value: '柱状图', label: '柱状图'},
            {value: '折线图', label: '折线图'},
            {value: '饼图', label: '饼图'},
            {value: '雷达图', label: '雷达图'},
            {value: '散点图', label: '散点图'},
            {value: '堆叠图', label: '堆叠图'},
          ]}>
          </Select>
        </Form.Item>

        <Form.Item name="file" label="原始数据">
          <Upload name="file">
            <Button icon={<UploadOutlined/>}>上传CSV文件</Button>
          </Upload>
        </Form.Item>

        <Form.Item
          name="color-picker"
          label="ColorPicker"
        >
          <ColorPicker/>
        </Form.Item>

        <Form.Item wrapperCol={{span: 12, offset: 6}}>
          <Space>
            <Button type="primary" htmlType="submit"  loading={submitting}  disabled={submitting}>
              智能分析
            </Button>
            <Button htmlType="reset">重置</Button>
          </Space>
        </Form.Item>
      </Form>
      <div>
        分析结论:{chart?.genResult}
      </div>
      <div>
        生成图表:
        {
          option &&  <ReactEcharts option={option} />
        }
      </div>

    </div>
  );
 };

 export default AddChart;
